<template>
    <div v-loading="isloading">
        <div v-for="(item, index) in conditionArr" :key="item.key" class="out_content">
            <div class="inner_content">
                <el-row type="flex" :gutter='10' justify="space-around" v-for="(item2, index2) in item.items"
                    :key="item2.key" style="margin-bottom:10px">
                    <el-col>
                        <select-para v-model="item2.fieldCode" :options="firstArr" casCode="SP_TRAI_PPF"
                            :casOpt.sync="item2.casOpt" :label.sync="item2.fieldName"
                            @change="changefieldCode($event,item2,true)">
                        </select-para>
                    </el-col>
                    <el-col>
                        <select-para :options="item2.casOpt" v-model="item2.opeCode" :label.sync="item2.opeName">
                        </select-para>
                    </el-col>
                    <el-col>
                        <div v-if="item2.pTypeLevl!==3">
                            <select-para v-model="item2.startVal" :options="item2.thirdArr">
                            </select-para>
                        </div>
                        <div v-if="item2.pTypeLevl==3">
                            <el-input v-model="item2.startVal"></el-input>
                        </div>

                    </el-col>
                    <el-col :span="4">
                        <i class="el-icon-close" @click="deleteIn(item,index2)" style="cursor:pointer"></i>
                    </el-col>
                </el-row>
                <el-button style="padding-left:0" icon="el-icon-circle-plus" type="text" @click="addIn(item)">
                    添加新条件
                </el-button>
            </div>
            <div style="min-width:7%;text-align:center">
                <i class="el-icon-delete" @click="deleteOut(index)" style="cursor:pointer;"></i>
            </div>
        </div>

        <el-row>
            <el-button style="padding-left:0;min-width:auto" icon="el-icon-circle-plus" type="text" @click="addOut">添加新条件
            </el-button>
        </el-row>
    </div>
</template>
<script>
    import selectPara from '@/components/selectPara';
    import {
        isArray
    } from "@/utils/Tools";
    import {
        queryParaCascByIdAndParamType
    } from '@/service/core/sysConfig';
    import {
        getSysParaListByCodes
    } from '@/service/core/dictionary.js';
    import request from "@/utils/requestServe";
    import {
        commPara
    } from '@/mixins/mixins'
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                ruleForm: {},
                firstArr: [],
                isloading: false,
            }
        },
        props: {
            typeCodeIds: String,
            value: { // v-model绑定值
                type: Array,
                default () {
                    return []
                }
            },
        },
        computed: {
            conditionArr: {
                get: function () {
                    return this.value

                },
                set: function (val) {
                    this.$emit("input", val);
                }
            },
            ...mapState({
                token: state => state.token.token,
                tenementId: state => state.token.tenementId,
            }),
        },
        components: {
            selectPara
        },
        mixins: [commPara],

        created() {
            this.getFirstArr(this.typeCodeIds)
        },
        methods: {
            getFirstArr(id) {
                this.isloading = true
                queryParaCascByIdAndParamType(id, 'SP_TRAI_CONDITION').then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data
                        if (data && isArray(data)) {
                            data = data.map(v => {
                                return {
                                    id: v.cId,
                                    label: v.name,
                                    value: v.valStr,
                                    keyString: v.keyString,
                                    pTypeLevl: v.pTypeLevl
                                };
                            });
                            this.$set(this, 'firstArr', [...data]);


                            let allItemS = []
                            for (let i = 0; i < this.conditionArr.length; i++) {
                                allItemS.push(...this.conditionArr[i].items)

                            }
                            if (allItemS.length) {
                                allItemS.forEach((i, index) => {
                                    this.changefieldCode(i.fieldCode, i, false)
                                })
                            }

                            this.isloading = false



                        }
                    }
                });
            },
            // 获取下级级联参数的options 开始==================
            getCascadeOption(item, casCode, item2) { // 获取下级级联参数
                if (!casCode) return
                if (!item) return
                queryParaCascByIdAndParamType(item.id, casCode).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (isArray(data)) {
                            data = data.map(item => {
                                return {
                                    value: item.valStr,
                                    label: item.name,
                                    ...item,
                                }
                            })
                            this.$set(item2, 'casOpt', data)
                        }
                    }
                })
            },
            changefieldCode(val, item2, flag) {
                if (flag) {
                    item2.startVal = ''
                    item2.opeCode = ''
                    item2.opeName = ''
                    item2.thirdArr = []
                }

                let selected = this.firstArr.find((i) => {
                    return i.value == val
                })

                if (selected) {
                    item2.pTypeLevl = selected.pTypeLevl
                }
                //获取第二级
                this.getCascadeOption(selected, 'SP_TRAI_PPF', item2)

                //获取第三级    pTypeLevl == 1参数   2接口   3输入框
                if (selected && selected.pTypeLevl && selected.pTypeLevl == 1) {
                    getSysParaListByCodes(selected.keyString).then(res => {
                        if (res.data.code == 1000) {
                            let data = res.data.data[selected.keyString];
                            data = data.map(v => {
                                return {
                                    label: v.name,
                                    value: v.valStr
                                }
                            });
                            this.$set(item2, 'thirdArr', [...data]);
                        }

                    });
                } else if (selected && selected.keyString && selected.pTypeLevl && selected.pTypeLevl == 2) {
                    let postUrl, a = {
                        token: this.token,
                        tenementId: this.tenementId
                    };
                    let params = {}
                    let postArr = selected.keyString.split('?')
                    if (postArr.length) {
                        postUrl = postArr[0]
                    }
                    if (postArr.length > 1) {
                        let params = {
                            ...a,
                            ...this.urlParams2Obj(selected.keyString)
                        }
                    }
                    if (postUrl) {
                        request({
                            url: postUrl,
                            method: "post",
                            data: params
                        }).then(res => {
                            if (res.data.code == 1000) {
                                let data = res.data.data;
                                if (data && isArray(data)) {
                                    data = data.map(v => {
                                        return {
                                            label: v.name,
                                            value: v.valStr
                                        }
                                    });

                                    this.$set(item2, 'thirdArr', [...data]);
                                }

                            }
                        });
                    }

                }

                this.isloading = false

            },
            urlParams2Obj(keyString) {
                var obj = {};
                var splitHrefArr = keyString.split('?');
                var tmpStr = '';
                var tmpStrSplitArr = [];
                if (splitHrefArr.length > 1) {
                    tmpStr = splitHrefArr[1];
                }
                tmpStrSplitArr = tmpStr.split('&');
                for (var i = 0; i < tmpStrSplitArr.length; i++) {
                    var item = tmpStrSplitArr[i].split('=');
                    obj[item[0]] = item[1];
                }
                return obj;
            },
            addIn(item) {
                let obj = {
                    key: new Date().getTime(),
                    endVal: '',
                    startVal: '',
                    fieldCode: '',
                    fieldName: '',
                    opeCode: '',
                    opeName: '',
                    thirdArr: [],
                    casOpt: []
                }
                item.items.push(obj)
            },
            addOut() {
                let obj = {
                    key: new Date().getTime(),
                    groupCode: '',
                    groupName: '',
                    items: [{
                        endVal: '',
                        startVal: '',
                        fieldCode: '',
                        fieldName: '',
                        opeCode: '',
                        opeName: ''
                    }]
                }
                this.conditionArr.push(obj)
            },
            deleteOut(index) {
                this.conditionArr.splice(index, 1)
            },
            deleteIn(item, index) {
                item.items.splice(index, 1)
            },
        },
    }

</script>
<style scoped>
    .out_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f1f1f1;
        padding: 10px;
        margin-bottom: 20px;
    }

    .inner_content {
        border: 1px solid rgb(241, 241, 241);
        padding: 20px 20px 0px;
        margin-bottom: 20px;
        min-width: 93%;
    }

</style>
